$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;

.home {
  position: relative;
  width: 100%;
  .main{
    width: 75vw;
    margin: 8vw auto;
    .section{
      margin-bottom: 6vw;
      .title{
        font-size: $fontSize_40;
        font-weight: bold;
        border-bottom: 3px solid #000;
        padding-bottom: 5px;
      }
      .list{
        display: flex;
        margin: 3vw 0;
        flex-wrap: wrap;
        .item{
          width: 28%;
          border: 1px solid #000;
          border-radius: 30px;
          margin-bottom: 3vw;
          margin-left: 4%;
          .d1{
            width: 85%;
            margin: 2vw auto 1vw auto;
            .tag{
              background-color: #000;
              width: fit-content;
              color:white;
              font-size: 20/19.2+vw;
              padding: 3px 15px;
              border-radius:5px;
            }
            .st{
              font-size: $fontSize_32;
              font-weight: bold;
              margin-top: 10px;
              min-height: 5vw;
            }
          }
          .info{
            background-color: #000;
            color:white;
            border-radius: 30px;
            height:8vw;
            padding: 1.5vw 7.5%;
            .st2{
              font-size: $fontSize_32;
              font-weight: bold;
            }
            .des{
              margin-top: 1vw;
              p{
                font-size: $fontSize_22;
                font-weight: bold;
                line-height: 1.6;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1024px) {
    .main{
      width: 80%;
      margin: 80px auto;
      .section{
        .title{
          font-size: 20px;
        }
        .list{
          flex-wrap: wrap;
          margin: 20px 0;
          .item{
              width: 100%;
              margin-left: 0;
              border-radius: 15px;
              .d1{
                width: 90%;
                margin: 15px auto 10px auto;
                .tag{
                  font-size: 14px;
                }
                .st{
                  font-size: 18px;
                }
              }
              .info{
                border-radius: 15px;
                height: auto;
                margin-top: 20px;
                padding: 15px 5%;
                .st2{
                  font-size: 18px;
                }
                .des{
                  p{
                    font-size: 14px;
                  }
                }
              }
          }
        }
      }
    }
  }
}